<template>

	<view class="container">
		<view class="content" v-for="item in achieveInfo">
			<text class="name">{{item.name}}</text>

			<view class="image-list">
				<text class="title">施工检查照</text>
				<view class="image-content">
					<template v-for="checkImg,index in item.checkImage">
						<image class="photo" :src="checkImg" mode="aspectFill"></image>
					</template>
				</view>
			</view>

			<view class="image-list">
				<text class="title">施工保护照</text>
				<view class="image-content">
					<template v-for="protectImg in item.protectImage">
						<image class="photo" :src="protectImg" mode="aspectFill"></image>
					</template>
				</view>
			</view>

			<view class="image-list">
				<text class="title">施工完成照</text>
				<view class="image-content">
					<template v-for="completeImg in item.completeImage">
						<image class="photo" :src="completeImg" mode="aspectFill"></image>
					</template>
				</view>
			</view>

			<view v-if="item.serviceItems[0].score" class="grade" v-for="servItem in item.serviceItems">
				<text class="title">{{servItem.serviceItemName}}</text>
				<u-rate :count="5" :size="24" :minCount="0" v-model="servItem.score" readonly></u-rate>
				<!-- <up-switch v-model="servItem.isCompleted" @change="change"></up-switch> -->
			</view>

		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		api_get_order_easy_info,
		api_saleOrder_getInfo,
		api_saleOrder_update,
		api_saleOrder_updateBuildStatus,
		api_serviceEmployee_add,
		api_serviceItem_checkServiceItem,
		api_serviceItem_handelServiceItem
	} from "../../apis/apis.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		useMainStore
	} from '@/utils/store.js';

	const store = ref(useMainStore());
	const orderInfo = ref({}); //订单其他信息
	const orderService = ref([]); //订单选择的服务
	const orderServiceItem = ref([]); //师傅选择的服务
	const achieveInfo = ref([]);



	//解析图片
	const groupImagesById = (data) => {
		let groupedData = {};
		// 解析每个图像类型的字符串为数组
		for (let key in data) {
			if (key == 'checkImage' || key == 'protectImage' || key == 'completeImage') {
				const imagesArray = JSON.parse(data[key]);
				imagesArray.forEach(item => {
					const id = item.id;
					if (!groupedData[id]) {
						groupedData[id] = {
							id,
							checkImage: [],
							protectImage: [],
							completeImage: []
						};
					}
					groupedData[id][key].push(item.item);
				});
			}
		}
		// 将结果转换为数组形式
		return Object.values(groupedData);
	}
	//解析服务
	const transformServiceItemList = (serviceItemList) => {
		const transformedData = {};

		serviceItemList.forEach(item => {
			const id = item.employeeId;
			const name = item.employeeName;
			const serviceName = item.name;
			const serviceItemId = item.serviceItemId;
			const score = item.score;

			if (!transformedData[id]) {
				transformedData[id] = {
					id: id,
					name: name,
					serviceItems: []
				};
			}

			transformedData[id].serviceItems.push({
				serviceItemName: serviceName,
				serviceItemId: serviceItemId,
				score: score,
				rate: 0,
				// isCompleted: 0
			});
		});

		// 将结果转换为数组形式
		return Object.values(transformedData);
	}
	//拼接
	const mergeResults = (imageRes, serviceRes) => {
		const mergedData = {};

		// 先处理 serviceRes
		serviceRes.forEach(item => {
			mergedData[item.id] = {
				id: item.id,
				name: item.name,
				serviceItems: item.serviceItems,
				checkImage: [],
				protectImage: [],
				completeImage: []
			};
		});

		// 再处理 imageRes
		imageRes.forEach(item => {
			if (mergedData[item.id]) {
				mergedData[item.id].checkImage = item.checkImage;
				mergedData[item.id].protectImage = item.protectImage;
				mergedData[item.id].completeImage = item.completeImage;
			}
		});

		// 将结果转换为数组形式
		return Object.values(mergedData);
	}


	onLoad(async (e) => {
		console.log(e);
		let param = {
			saleId: e.orderId
		};

		// 查询订单其他信息
		try {
			let res2 = await api_saleOrder_getInfo(param);
			orderService.value = res2.data.orderService; // 订单的服务情况
			orderServiceItem.value = res2.data.orderService.serviceItemList;
			let imageRes = groupImagesById(orderService.value);
			let serviceRes = transformServiceItemList(orderServiceItem.value);
			let finalResult = mergeResults(imageRes, serviceRes);
			console.log('finalResult', finalResult);
			achieveInfo.value = finalResult;
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	});
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30rpx;

		.content {
			display: flex;
			flex-direction: column;
			align-items: left;
			width: 700rpx;
			gap: 40rpx;
			margin-bottom: 10rpx;

			.name {
				font-family: Alibaba_PuHuiTi_Medium;
				font-weight: 500;
				font-size: 34rpx;
				color: $font-primary-color;
			}

			.image-list {
				width: 700rpx;
				display: flex;
				flex-direction: column;
				align-items: left;

				.title {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-sub-color;
					margin-bottom: 10rpx;
				}

				.image-content {
					width: 700rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 5rpx;

					.photo {
						width: 230rpx;
						height: 230rpx;
					}
				}
			}

			.grade {
				display: flex;
				flex-direction: column;
				align-items: left;

				.title {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-sub-color;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 80rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: $primary-color;
			font-family: Alibaba_PuHuiTi_Regular;
			font-weight: 400;
			font-size: 38rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>